<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./first/js/moblie.js"></script>
    <link rel="stylesheet" href="./first/js/swiper-bundle.min.css">
    <link rel="stylesheet" href="./first/iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        .clear::after {
            display: block;
            content: "";
            clear: both;
        }

        /* 首页导航栏 */
        html{
            overflow: hidden;
            height: 100%;
        }
        body{
            height: 100%;
            overflow: auto;
        }
        .homepage {
            background-color: rgb(246, 247, 249);
            display: flex;
            display: -webkit-flex; 
            min-height: 100vh;
            flex-direction: column;
        }

        .home {
           
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            background-color: rgb(255, 255, 255);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            z-index: 5;
            top: 0;
        }

        .chinese {
            width: 16rem;
            height: 6.1875rem;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        .man {
            width: 13.5938rem;
            height: 4.2188rem;
            border-radius: 5px;
            position: relative;
            margin-left: -3.75rem;
            background-color: rgb(224,224,224);
        }
        .man a {
            color: gray;
            font-size: 2rem;
            line-height: 4.2188rem;
            padding-left: 1.25rem;
        }
    
        .woman {
            width: 6.5938rem;
            height: 3.8rem;
            background-color: white;
            text-align: center;
            line-height: 3.8rem;
            border-radius: 5px;
            position: absolute;
            left: 6.5938rem;
            top: 2px;
            

        }
        .woman a {
            font-size: 2rem;
            color:black;
        }


        .app {
            width: 10.0925rem;
            height: 3.9375rem;
            background-color: rgb(231, 214, 226);
            font-size: 1.625rem;
            border-radius: 2.5rem;
            text-align: center;
        }

        .app a {
            color: rgb(229, 53, 62);
            line-height: 3.9375rem;
        }

        /* 搜索 */
        .search {
            padding-top: 7.5rem;
            margin-top: 10px;
            position: relative;
        }

        .search input {
            border-style: none;
            width: 40.0187rem;
            border-radius: 17px;
            margin-left: 10px;
            line-height: 4rem;
            color: rgb(204, 204, 204);
            padding-left: 5rem;
        }

        .icon {
            position: absolute;
            left: 1.75rem;
            top: 1rem;
            font-weight: bold;
            color: rgb(150, 155, 163);
        }

        /*  */
        .banner {
            width: 43.425rem;
            margin: 10px auto;
        }

        .banner img {
            width: 100%;
            border-radius: 10px;
        }

        /* 分类 */
        .classify {
            width: 43.675rem;
            height: 9.7813rem;
            background-color: rgb(255, 255, 255);
            border-radius: 1.25rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .box {
            width: 6.8513rem;
            height: 7.4063rem;
            text-align: center;
        }

        .box img {
            width: 5.25rem;
            height: 5.25rem;
        }

        .box1 {
            font-weight: bold;
        }
        .box1 a{
                color: black;
        }
        /* 起点读书app */
        .origin {
            width: 43.675rem;
            margin: 10px auto;
            background-color: rgb(255, 255, 255);
            border-radius: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .study {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box2 img {
            width: 5.375rem;
            height: 5.375rem;
            padding-left: 2rem;
            padding-top: 1rem;
        }

        .box3 {
            margin-left: 2rem;
        }

        .box4 {
            font-size: 2rem;
            color: rgb(25, 25, 25);
        }

        .box5 {
            font-size: .75rem;
            color: rgb(128, 128, 128);
            margin-top: 6px;
        }

        .down {
            width: 8.8112rem;
            height: 3.75rem;
            background-color: rgb(229, 53, 62);
            border-radius: 2.25rem;
            text-align: center;
            line-height: 3.75rem;
            margin-right: 1.75rem;
        }

        .down a {
            color: white;
        }

        /* 新人必读 */
        .new {
            background-color: rgb(255, 255, 255);
        }

        .read {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .read2 {
            margin-top: 1.25rem;
            display: flex;
            flex-wrap: wrap;
        }

        .pick {
            margin-left: 1.25rem;
            margin-top: 1.875rem;
        }

        .pick span:nth-child(1) {
            color: rgb(229, 53, 62);
        }

        .pick span:nth-child(2) {
            font-weight: bold;
            font-size: 1.75rem;
            font-family: 'Times New Roman', Times, serif;
        }

        .pick span:nth-child(3) {
            font-size: 1rem;
            color: rgb(150, 155, 163);
        }

        .pick1 {
            color: rgb(87, 144, 223);
            margin-right: 1rem;
            margin-top: 1.875rem;
        }

        .pick2 {
            display: flex;
            margin: .625rem 0 1.25rem;
        }

        .book1 img {
            width: 6rem;
            height: 8.25rem;
            padding-left: 1.25rem;
        }

        .pick3 {
            margin-left: 5px;
        }

        .pick3 div:nth-child(1) {
            width: 15rem;

            font-size: 2rem;
            font-weight: bold;
        }

        .pick3 div:nth-child(2) {
            font-size: 1.45rem;
        }

        /* 新书强推 */
        .newbook {
            display: flex;
            justify-content: space-evenly;
            margin-top: 1.875rem;
            margin-bottom: 1.875rem;
        }

        .push {
            width: 21.635rem;
            height: 3.2975rem;


            border: 1px solid rgb(237, 66, 75);
            border-radius: 1.875rem;
            text-align: center;
            line-height: 3.2975rem;
        }

        .push a {
            color: rgb(237, 66, 75);
            font-size: 1.55rem;
        }

        .qingyun {
            width: 21.635rem;
            height: 3.2975rem;

            border: 1px solid rgb(237, 66, 75);
            border-radius: 1.875rem;
            text-align: center;
            line-height: 3.2975rem;
        }

        .qingyun a {
            color: rgb(237, 66, 75);
            font-size: 1.55rem;
        }

        /* 畅销精选 */
        .active {
            background-color: rgb(255, 255, 255);
        }

        .demand {
            display: flex;
            justify-content: space-between;
            padding-top: 1.25rem;
        }

        .demand div:nth-child(1) {
            font-size: 2.15rem;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            margin-left: 1.25rem;
        }

        .demand div:nth-child(1) .yishu {
            color: rgb(237, 66, 75);
        }

        .demand div:nth-child(2) {
            color: rgb(150, 155, 163);
            font-size: 1.875rem;
            margin-right: 1.25rem;
        }

        .demand2 {
            display: flex;
            margin-top: 1.875rem;

            border-bottom: 1px solid rgb(245, 245, 246);
        }

        .book5 img {
            width: 8.5313rem;
            height: 11.5013rem;
            padding-left: 1.25rem;
        }

        .break {
            margin-left: 1.25rem;
        }

        .break div:nth-child(1) {
            font-size: 2rem;
            font-weight: bold;
        }

        .break div:nth-child(2) {
            width: 34.375rem;
            height: 6.25rem;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);

        }

        .break div:nth-child(3) {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
            position: relative;
        }

        .break div:nth-child(3) span {
            font-size: 1rem;
            padding-left: 3rem;
            position: absolute;
            right: 1rem;
        }

        /* 猜你喜欢 */
        .love {
            background-color: rgb(255, 255, 255);
        }

        .guess {
            padding-top: 1.25rem;
            padding-left: 1.25rem;
            margin-top: 1.25rem;
        }

        .guess span:nth-child(1) {
            color: rgb(237, 66, 75);
        }

        .guess span:nth-child(2) {
            font-size: 2.25rem;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            padding-left: 2px;
        }

        .guess span:nth-child(3) {
            font-size: 1.875rem;
            color: rgb(150, 155, 163);
            padding-left: 1.875rem;
        }

        .you {
            font-size: 1.875rem;
            color: rgb(150, 155, 163);
            margin-top: 2.5rem;
            margin-left: 1.25rem;
        }

        p {
            margin-top: 3.125rem;
            margin-left: 1.25rem;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
        }

        .guess2 {
            display: flex;
            margin-top: 1.25rem;
            border-bottom: 1px solid rgb(245, 245, 246);
        }

        .jfif img {
            width: 8.5313rem;
            height: 11.5013rem;
            padding-left: 1.25rem;
        }

        .bout {
            margin-left: 1.25rem;
            line-height: 3rem;
        }

        .bout div:nth-child(1) {
            font-size: 2rem;
            font-weight: bold;
        }

        .bout div:nth-child(2) {
            width: 34.375rem;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
        }

        .bout div:nth-child(3) {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
        }

        .bout div:nth-child(4) {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
        }

        .change {
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(87, 144, 223);
            font-size: 1.875rem;
            line-height: 6.25rem;
        }

        /* 限时免费 */
        .free {
            background-color: rgb(255, 255, 255);

        }

        .limit {
            float: left;
            margin-left: 1.25rem;
        }

        .limit span:nth-child(1) {
            color: rgb(237, 66, 75);
        }

        .limit span:nth-child(2) {
            font-size: 2.25rem;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            padding-left: 2px;
        }

        .time {
            float: left;
            margin-left: 5px;
        }

        .time span:nth-child(1) {
            background-color: rgb(229, 53, 62);
            color: white;
        }

        .time span:nth-child(2) {
            background-color: black;
            color: white;
        }

        .time span:nth-child(3) {
            background-color: black;
            color: white;
        }

        .time span:nth-child(4) {
            background-color: black;
            color: white;
        }

        .more {
            float: right;
            color: rgb(150, 155, 163);
            font-size: 1.875rem;
            margin-right: 1.25rem;
        }

        .limit2 {
            display: flex;
            justify-content: space-between;
            margin-top: 1.25rem;

            overflow: hidden;
            overflow: scroll;
            overflow-x: auto;

        }

        .limit2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .cover {
            margin-left: 20px;

        }

        .cover div:nth-child(1) img {
            width: 8.5313rem;
            height: 11.5013rem;
        }

        .cover div:nth-child(2) {
            width: 8.5313rem;
            font-size: 1.7rem;
            line-height: 2.5rem;
        }

        .cover div:nth-child(3) {
            color: rgb(204, 204, 204);
        }

        /* 排行榜 */
        .list {
            background-color: rgb(255, 255, 255);
            margin-top: 1.875rem;
        }

        .ment {
            display: flex;
            justify-content: space-between;
            padding-top: 1.25rem;
        }

        .force {
            margin-left: 1.25rem;
        }

        .force span:nth-child(1) {
            color: rgb(229, 53, 62);
        }

        .force span:nth-child(2) {
            font-size: 2.25rem;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            padding-left: 2px;
        }

        .morex {
            color: rgb(150, 155, 163);
            font-size: 1.875rem;
            margin-right: 1.25rem;
        }

        .inthe {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inthe div {
            width: 11.075rem;
            height: 3.285rem;
            border: 1px solid rgb(229, 53, 62);
            margin-left: -2px;
            border-radius: 5px;
            font-size: 1.9rem;
            color: rgb(229, 53, 62);
            text-align: center;
            line-height: 3.285rem;
        }

        .inthe div:hover {
            color: white;
            background-color: rgb(229, 53, 62);
        }

        .ment2 {
            margin-top: 1.875rem;
            display: flex;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;

        }

        .ment2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .cover1 {
            margin-left: 2.5rem;
        }

        .cover1 div:nth-child(1) img {
            width: 8.5313rem;
            height: 11.5013rem;
        }

        .cover1 div:nth-child(2) {
            width: 8.5313rem;
            font-size: 1.7rem;

        }

        .cover1 div:nth-child(3) {
            color: rgb(204, 204, 204);
        }

        /* 分类推荐 */
        /* 第一部分 */
        .recom {
            background-color: rgb(255, 255, 255);
        }

        .ais {
            display: flex;
            justify-content: space-between;
            margin-top: 1.875rem;
            margin-left: 1.25rem;
        }

        .classify2 span:nth-child(1) {
            color: rgb(229, 53, 62);
        }

        .classify2 span:nth-child(2) {
            font-size: 2.25rem;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
        }

        .classify2 span:nth-child(3) {
            font-size: 1.75rem;
            color: rgb(204, 204, 204);
        }

        .fantasy {
            margin: 1.25rem 1rem;
            display: flex;
        }

        .fantasy div {
            width: 15rem;
            height: 3.2975rem;
            border: 1px solid rgb(229, 53, 62);
            border-radius: 5px;
            margin-left: -2px;
            text-align: center;
            line-height: 3.2975rem;
            font-size: 1.9rem;
            color: rgb(229, 53, 62);
        }

        .fantasy div:hover {
            color: white;
            background-color: rgb(229, 53, 62);
        }

        .ais2 {
            border-bottom: 1px solid rgb(224, 224, 224);

            display: flex;
            justify-content: space-between;
            overflow: hidden;
            overflow: scroll;

        }

        .ais2::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }

        .cover2 {
            margin-left: 2.5rem;
        }

        .cover2 div:nth-child(1) img {
            width: 8.5313rem;
            height: 11.5013rem;
        }

        .cover2 div:nth-child(2) {
            width: 8.5313rem;
            font-size: 1.7rem;

        }

        .cover2 div:nth-child(3) {
            color: rgb(204, 204, 204);
        }

        /* 第二部分 */
        .fantasy2 {
            margin: 3.75rem 1rem 1.25rem;
            display: flex;
        }

        .fantasy2 div {
            width: 15rem;
            height: 3.2975rem;
            border: 1px solid rgb(229, 53, 62);
            border-radius: 5px;
            margin-left: -2px;
            text-align: center;
            line-height: 3.2975rem;
            font-size: 1.9rem;
            color: rgb(229, 53, 62);
        }

        .fantasy2 div:hover {
            color: white;
            background-color: rgb(229, 53, 62);
        }

        /* 唯美爆爽 仙侠手游 */
        .tips {
            margin: 2.5rem 1rem;
        }

        .tips img {
            width: 44.55rem;
            height: 6rem;
        }

        /* 新书抢鲜 */
        .active {
            margin-top: 2.5rem;
            background-color: rgb(255, 255, 255);
        }

        .demand {
            display: flex;
            justify-content: space-between;
            padding-top: 1.25rem;
        }

        .demand div:nth-child(1) {
            font-size: 2.15rem;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            margin-left: 1.25rem;
        }

        .demand div:nth-child(1) .yishu {
            color: rgb(237, 66, 75);
        }

        .demand div:nth-child(1) .timess {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
        }

        .demand div:nth-child(2) {
            color: rgb(150, 155, 163);
            font-size: 1.875rem;
            margin-right: 1.25rem;
        }

        .demand2 {
            display: flex;
            margin-top: 1.875rem;

            border-bottom: 1px solid rgb(245, 245, 246);
        }

        .book5 img {
            width: 8.5313rem;
            height: 11.5013rem;
            padding-left: 1.25rem;
        }

        .break3 {
            margin-left: 1.25rem;
        }

        .big {
            font-size: 2rem;
            font-weight: bold;
        }

        .small {
            width: 34.375rem;
            height: 6.25rem;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);

        }

        .break3 div:nth-child(3) {
            display: flex;
            justify-content: space-between;
        }

        .writ {
            font-size: 1.75rem;
            color: rgb(150, 155, 163);

        }

        .ser {
            font-size: .625rem;
        }

        .ser span:nth-child(1) {
            color: rgb(150, 155, 163);
            border: 1px solid rgb(150, 155, 163);
        }

        .ser span:nth-child(2) {
            color: rgb(229, 53, 62);
            border: 1px solid rgb(229, 53, 62, .5);
        }

        .ser span:nth-child(3) {
            color: rgb(66, 132, 237);
            border: 1px solid rgb(66, 132, 237, .5);
        }

        /* 轻小说 */
        .novel {
            background-color: rgb(255, 255, 255);
            margin-top: 2.5rem;
        }

        /* 精选专题 */
        .special {
            background-color: rgb(255, 255, 255);
            margin-top: 2.5rem;
        }

        .picture {

            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: center;
        }

        .picture img {
            width: 21.75rem;
            height: 8.5313rem;
            padding-top: 1.875rem;
        }
        /* qq登录 */
        .login {
            width: 51.05rem;
            height: 7.21rem;
            background-color: rgb(255, 255, 255);
            text-align: center;
            line-height: 7.21rem;
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        .login span {
            font-size: 2rem;
            font-weight: bold;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        }

        .login a {
            font-size: 2rem;
            color: rgb(66, 132, 237);
        }

        /* qq阅读 */
        .read {
            background-color: rgb(255, 255, 255);
            line-height: 8.75rem;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .read div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        /*  */
        .touch {
            background-color: rgb(255, 255, 255);
            line-height: 8.75rem;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .touch div {
            font-size: 2rem;
            color: rgb(150, 155, 163);
        }

        .touch div:hover {
            color: black;
        }

        /*  */
        .ser1 {
            background-color: rgb(255, 255, 255);
            text-align: center;
            font-size: 1.75rem;
            color: rgb(150, 155, 163);
            padding-bottom: 7.5rem;
        }

        /* 尾页 */
        .trail {
            position: absolute;
            bottom: 0;
            left: 0;
            margin-top: 2.5rem;
            background-color: rgb(255, 255, 255);
            display: flex;
            justify-content: space-around;
            align-items: center;
            
        }

        .rack {
            width: 23.4375rem;
            height: 6rem;
            text-align: center;
            line-height: 6rem;
        }

        .rack a {
            font-size: 2.7rem;
            color: black;
        }

        .rack .iconfont {
            font-size: 2.7rem;
        }

        .count {
            width: 23.4375rem;
            height: 6rem;
            text-align: center;
            line-height: 6rem;
        }

        .count a {
            font-size: 2.7rem;
            color: black;
        }

        .count .iconfont {
            font-size: 2.7rem;
        }
    </style>
</head>

<body>
    <div class="homepage">
        <!-- 首页导航栏 -->
        <div class="home">
            <div class="chinese"><img src="./first/img/1/logo-qidian.svg"></div>

            <div class="man">
                <a href="">男生</a>
                <div class="woman"><a href="">女生</a></div>
            </div>
            <div class="app"><a href="###">打开app</a></div>
        </div>
        <!-- 搜索栏 -->
        <div class="search">
            <input type="text" placeholder="我的姑父叫朱棣">
            <div class="icon"><span class="iconfont icon-sousu"></span></div>
        </div>
        <!--  -->
        <div class="banner">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./first/img/2/banner1.jpg"></div>
                    <div class="swiper-slide"><img src="./first/img/2/banner2.jpg"></div>
                    <div class="swiper-slide"><img src="./first/img/2/banner3.jpg"></div>
                    <div class="swiper-slide"><img src="./first/img/2/banner4.jpg"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!--  -->
            <script src="./first/js/swiper-bundle.min.js"></script>
            <script>
                var mySwiper = new Swiper('.swiper', {

                    loop: true, // 循环模式选项
                    autoplay: true,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    autoplay: true
                    //  自动播放轮播图

                })        
            </script>
        </div>
        <!-- 分类 -->
        <div class="classify">
            <div class="box">
                <img src="./first/img/3/icon1.png">
                <div class="box1"><a href="./classification.html">分类</a></div>
            </div>
            <div class="box">
                <img src="./first/img/3/icon2.png">
                <div class="box1"><a href="./ranking list.html">排行榜</a></div>
            </div>
            <div class="box">
                <img src="./first/img/3/icon3.png">
                <div class="box1"><a href="./free.html">免费</a></div>
            </div>
            <div class="box">
                <img src="./first/img/3/icon4.png">
                <div class="box1"><a href="./complete copy.html">完本</a></div>
            </div>
            <div class="box">
                <img src="./first/img/3/icon5.png">
                <div class="box1"><a href="./manito.html">大神</a></div>
            </div>
            <div class="box">
                <img src="./first/img/3/icon6.png">
                <div class="box1"><a href="./book list.html">书单</a></div>
            </div>

        </div>
        <!-- 起点读书app -->
        <div class="origin">
            <div class="study">
                <div class="box2"><img src="./first/img/3/logo.png"></div>
                <div class="box3">
                    <div class="box4">起点读书app</div>
                    <div class="box5">海量好书，新人免费</div>
                </div>
            </div>
            <div class="down"><a href="###">立即下载</a></div>
        </div>
        <!-- 新人必读 -->
        <div class="new">
            <div class="read">
                <div class="pick">
                    <span>|</span>
                    <span>新人必读</span>
                    <span>起点优质书单</span>
                </div>
                <div class="pick1"><a href="###"><span class="iconfont icon-shuaxin"></span>换一批</a></div>
            </div>
            <div class="read2">
                <div class="pick2">
                    <div class="book1"><img src="./first/img/2/book1.webp"></div>
                    <div class="pick3">
                        <div>武侠：开局奖励满级神功</div>
                        <div>武侠：武侠幻想</div>
                    </div>
                </div>
                <div class="pick2">
                    <div class="book1"><img src="./first/img/2/book2.webp"></div>
                    <div class="pick3">
                        <div>不科学御兽</div>
                        <div>玄幻：异世大陆</div>
                    </div>
                </div>
                <div class="pick2">
                    <div class="book1"><img src="./first/img/2/book3.webp"></div>
                    <div class="pick3">
                        <div>佣兵的战争</div>
                        <div>现实：人间百态</div>
                    </div>
                </div>
                <div class="pick2">
                    <div class="book1"><img src="./first/img/2/book4.webp"></div>
                    <div class="pick3">
                        <div>余下的，只有噪音</div>
                        <div>体育：篮球运动</div>
                    </div>
                </div>

            </div>
        </div>
        <!-- 新书强推 -->
        <div class="newbook">
            <div class="push"><a href="">新书强推</a></div>
            <div class="qingyun"><a href="">青云.网文新风</a></div>
        </div>
        <!-- 畅销精选 -->
        <div class="active">
            <div class="demand">
                <div><span class="yishu">|</span>畅销精选</div>
                <div>更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/2/book5.webp"></div>
                <div class="break">
                    <div>斗破卖罐子，开局云韵突破斗宗</div>
                    <div>穿越斗气大陆，叶云成为了一个罐子商人。罐子里面可开出诸天万界的宝物，每卖出...</div>
                    <div>玄幻<span>连载 118.09万字</span></div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/2/book6.webp"></div>
                <div class="break">
                    <div>曹操穿越武大郎</div>
                    <div>让大汉的雄，荡尽宋朝的儒。...</div>
                    <div>神枪老飞侠<span>连载 165.1万字</span></div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/2/book7.webp"></div>
                <div class="break">
                    <div>乾隆：大清？朕的大清呢？</div>
                    <div>朱老板穿越被清朝追杀，被迫出海逃命，游历欧洲五年，带回一名陆军统帅，一名哲学...</div>
                    <div>Mr木木木啊<span>连载 63.65万字</span></div>
                </div>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="love">
            <div class="guess">
                <span>|</span>
                <span>猜你喜欢</span>
                <span>根据你阅读的口味智能推荐</span>
            </div>
            <div class="you">你可能感兴趣的好书</div>
            <p>万千书友喜欢的精品佳作</p>
            <div class="guess2">
                <div class="jfif"><img src="./first/img/2/1.jfif"></div>
                <div class="bout">
                    <div>赤心巡天</div>
                    <div>（《赤心巡天》实体书已在全网发售）</div>
                    <div>上古时代，妖族绝迹。近古时代，龙族...</div>
                    <div>仙侠·610万字</div>
                </div>
            </div>
            <p>你可能感兴趣的好书</p>
            <div class="guess2">
                <div class="jfif"><img src="./first/img/2/book1.webp"></div>
                <div class="bout">
                    <div>武侠：开局奖励满级神功</div>
                    <div>苏陌穿越到武侠世界，接手了一家濒临倒闭的镖局。江湖凶恶，风波诡谲，本不...</div>
                    <div>武侠·365万字</div>
                </div>
            </div>
            <p>为你精心挑选的优质作品</p>
            <div class="guess2">
                <div class="jfif"><img src="./first/img/2/book2.webp"></div>
                <div class="bout">
                    <div>不科学御兽</div>
                    <div>这是一个以御兽为主流的异世界。动物，植物，死灵，机械......九尾炎狐，...</div>
                    <div>玄幻·403万字</div>
                </div>
            </div>
            <div class="change"><span class="iconfont icon-shuaxin"></span>换一批</div>
        </div>
        <!-- 限时免费 -->
        <div class="free">
            <div class=" clear">
                <div class="limit">
                    <span>|</span>
                    <span>限时免费</span>
                </div>
                <div class="time">
                    <span>01</span>:
                    <span>03</span>:
                    <span>34</span>:
                    <span>01</span>
                </div>
                <div class="more">更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="limit2">
                <div class="cover">
                    <div><img src="./first/img/4/150 (9).webp"></div>
                    <div>我在四合院有个家</div>
                    <div>海螺的曹...</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/4/150 (4).webp"></div>
                    <div>隐士是如何练成的</div>
                    <div>一家之煮</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/4/150 (6).webp"></div>
                    <div>荒古禁区传道百年，狠</div>
                    <div>躺尸三万年</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/4/150 (7).webp"></div>
                    <div>绝世唐门之百变为王</div>
                    <div>死亡吟唱</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/4/150 (3).webp"></div>
                    <div>人在诸天，从被通缉开</div>
                    <div>一剑卷风云</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/4/150 (5).webp"></div>
                    <div>华娱激荡年代</div>
                    <div>黑色的单车</div>
                </div>
            </div>
        </div>
        <!--排行榜 -->
        <div class="list">
            <div class="ment">
                <div class="force">
                    <span>|</span>
                    <span>排行榜</span>
                </div>
                <div class="morex">更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="inthe">
                <div>畅销榜</div>
                <div>风云榜</div>
                <div>签约榜</div>
                <div>推荐榜</div>
            </div>
            <div class="ment2">
                <div class="cover1">
                    <div><img src="./first/img/4/300（1）.webp"></div>
                    <div>灵魂行者</div>
                    <div>卖报小郎君</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（2）.webp"></div>
                    <div>深空彼岸</div>
                    <div>辰东</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（3）.webp"></div>
                    <div>光阴之外</div>
                    <div>耳根</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（4）.webp"></div>
                    <div>明克街13号</div>
                    <div>纯洁滴小龙</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（5）.webp"></div>
                    <div>道诡异仙</div>
                    <div>狐尾的笔</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（6）.webp"></div>
                    <div>诡秘之主</div>
                    <div>爱潜水的...</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（7）.webp"></div>
                    <div>火力为王</div>
                    <div>如意水</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（8）.webp"></div>
                    <div>渊天尊</div>
                    <div>烽仙</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（9）.webp"></div>
                    <div>深海余烬</div>
                    <div>远瞳</div>
                </div>
                <div class="cover1">
                    <div><img src="./first/img/4/300（10）.webp"></div>
                    <div>苟在妖武乱世修仙</div>
                    <div>文抄公</div>
                </div>
            </div>
        </div>
        <!-- 分类推荐 -->
        <!-- 第一部分 -->
        <div class="recom">
            <div class="ais">
                <div class="classify2">
                    <span>|</span>
                    <span>分类推荐</span>
                    <span>频道主编推荐</span>
                </div>
                <div class="morex">更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="fantasy">
                <div>玄幻奇幻</div>
                <div>武侠仙侠</div>
                <div>都市职场</div>
            </div>
            <div class="ais2">
                <div class="cover2">
                    <div><img src="./first/img/4/3011.webp"></div>
                    <div>长生：我修炼没有瓶颈</div>
                    <div>老鸡吃蘑菇</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3012.webp"></div>
                    <div>我爹绝对被人夺舍了</div>
                    <div>李别浪</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3013.webp"></div>
                    <div>光阴之主</div>
                    <div>鱼儿小小</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3014.webp"></div>
                    <div>我的剑意能无限提升</div>
                    <div>奋笔十年</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3015.webp"></div>
                    <div>从金龙开始进化血脉</div>
                    <div>以德服人</div>
                </div>
            </div>
            <!-- 第二部分 -->
            <div class="fantasy2">
                <div>历史军事</div>
                <div>游戏体育</div>
                <div>科幻悬疑</div>
            </div>
            <div class="ais2">
                <div class="cover2">
                    <div><img src="./first/img/4/3021.webp"></div>
                    <div>万历强明</div>
                    <div>数沙人</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3022.webp"></div>
                    <div>人在东汉，胡汉共尊</div>
                    <div>守望青山</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3023.webp"></div>
                    <div>唐旗</div>
                    <div>灰心的鲸鲨</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3024.webp"></div>
                    <div>大唐猎户</div>
                    <div>老衲胡来</div>
                </div>
                <div class="cover2">
                    <div><img src="./first/img/4/3025.webp"></div>
                    <div>亮剑之系统</div>
                    <div>拳行天下</div>
                </div>
            </div>
        </div>
        <!-- 唯美爆爽 仙侠手游 -->
        <div class="tips"><img src="./first/img/3/tips.jpg"></div>
        <!-- 新书抢鲜 -->
        <div class="active">
            <div class="demand">
                <div><span class="yishu">|</span>新书抢鲜
                    <span class="timess">24小时热销新书</span>
                </div>
                <div>更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/4/300（10）.webp"></div>
                <div class="break3">
                    <div class="big">苟在妖武乱世修仙</div>
                    <div class="small">方夕穿了，而且是二穿！在修仙界我唯唯诺诺，在异世界我重拳出击！没想到千...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>文抄公</div>
                        <div class="ser">
                            <span>仙侠</span>
                            <span>连载中</span>
                            <span>48.38万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/5/3000.webp"></div>
                <div class="break3">
                    <div class="big">大明国师</div>
                    <div class="small">【狱中讲课，朱棣偷听后求我当国师】见证了靖难之役结束，作为“株十族”对...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>西湖遇雨</div>
                        <div class="ser">
                            <span>历史</span>
                            <span>连载中</span>
                            <span>64.87万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/5/3001.webp"></div>
                <div class="break3">
                    <div class="big">警察叫我备案，苦练绝学的我曝光</div>
                    <div class="small">苏云穿越成一名小主播，苦于没才艺便每天直播'苦练各种绝学'，想混口饭吃...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>绝月清空</div>
                        <div class="ser">
                            <span>都市</span>
                            <span>连载中</span>
                            <span>104.61万字</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 畅销完本 -->
        <div class="active">
            <div class="demand">
                <div><span class="yishu">|</span>畅销完本
                    <span class="timess">今日畅销完本书</span>
                </div>
                <div>更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/4/300（6）.webp"></div>
                <div class="break3">
                    <div class="big">诡秘之主</div>
                    <div class="small">蒸汽与机械的浪潮中，谁能触及非凡？历史和黑暗的迷雾里，又是谁在耳语？我...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>爱潜水的乌贼</div>
                        <div class="ser">
                            <span>玄幻</span>
                            <span>已经完本</span>
                            <span>446.53万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/5/3003.webp"></div>
                <div class="break3">
                    <div class="big">大奉打更人</div>
                    <div class="small">《大奉打更人》（第一卷）实体书已在天猫，当当，京东等全面平台，以及各个实...</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>卖报小郎君</div>
                        <div class="ser">
                            <span>仙侠</span>
                            <span>已经完本</span>
                            <span>380.11万字</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="demand2">
                <div class="book5"><img src="./first/img/5/3004.webp"></div>
                <div class="break3">
                    <div class="big">天启预报</div>
                    <div class="small">"我想要挨一顿毒打....."——灾厄之剑，旧世界守墓人，调律师，最后的天国悍</div>
                    <div>
                        <div class="writ"><span class="iconfont icon-zhanghu"></span>风月</div>
                        <div class="ser">
                            <span>奇幻</span>
                            <span>已经完本</span>
                            <span>629.69万字</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 轻小说 -->
        <div class="novel">
            <div class="ment">
                <div class="force">
                    <span>|</span>
                    <span>轻小说</span>
                </div>
                <div class="morex">更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="limit2">
                <div class="cover">
                    <div><img src="./first/img/5/3006.webp"></div>
                    <div>我的剑豪模拟器</div>
                    <div>火舌</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/5/3007.webp"></div>
                    <div>她们都以为自己重生</div>
                    <div>左初</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/5/3008.webp"></div>
                    <div>无所谓，风赢大人会出</div>
                    <div>潜水吐泡泡</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/5/3009.webp"></div>
                    <div>绝世唐门加载提瓦特刻</div>
                    <div>借我一口...</div>
                </div>
                <div class="cover">
                    <div><img src="./first/img/5/3010.webp"></div>
                    <div>从武神开始的神格化</div>
                    <div>山如云</div>
                </div>
            </div>
        </div>
        <!-- 精选专题 -->
        <div class="special">
            <div class="ment">
                <div class="force">
                    <span>|</span>
                    <span>精选专题</span>
                </div>
                <div class="morex">更多<span class="iconfont icon-youjiantou"></span></div>
            </div>
            <div class="picture">
                <img src="./first/img/5/1.jpeg">
                <img src="./first/img/5/2.jpg">
                <img src="./first/img/5/3..jfif">
                <img src="./first/img/5/4.jpg">
            </div>
        </div>
        <!-- 立即登录 -->
        <div class="login">
            <span>登录后获得更多特色功能·</span><a href="###">立即登录</a>
        </div>
        <!-- qq阅读 -->
        <div class="read">
            <div>QQ阅读</div>
            <div>红袖添香</div>
        </div>
        <!--  -->
        <div class="touch">
            <div>客户端</div>
            <div>触屏版</div>
            <div>帮助与客服</div>
            <div>搜索</div>
        </div>
        <!--  -->
        <div class="ser1">
            <div>网站备案/许可证号：泸B2-20080046-1</div>
            <div>互联网宗教信息服务许可证 编号：泸（2022）00000022</div>
            <div>copyright© 2022-2023 m.qidian.com</div>
        </div>
        <!-- 尾页 -->
        <div class="trail">
            <div class="rack"><span class="iconfont icon-a-168-shu"></span><a href="./backrack.html">书架</a></div>
            <div class="count"><span class="iconfont icon-zhanghu"></span><a href="./account.html">账户</a></div>
        </div>
    </div>


</body>

</html>